/*
  学习目标：生命周期-卸载阶段
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    isShow: true,
  };

  render() {
    const { isShow } = this.state;
    return <div>{isShow && <Child></Child>}</div>;
  }
}

class Child extends React.Component {
  handleResize = () => {
    console.log('窗口改变了  ----->  ');
  };

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  // 类似: vue中的beforeDestroy
  // 作用: 做清除的作用, 清除定时器/解绑事件
  componentWillUnmount() {
    console.log('我将要被卸载了  ----->  ');
    window.removeEventListener('resize', this.handleResize);
  }

  render() {
    return <div>Child</div>;
  }
}
